<template>
  <div>
    <ul>
      <li v-for="(v, index) in list" :key="index">
        <img :src="v.src" alt="" />
        <p>{{ v.info }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp",
          info: "苏宁易购",
        },
        {
          src: "https://gw.alicdn.com/tfs/TB1wSoFa5qAXuNjy1XdXXaYcVXa-196-196.png?avatar=1_110x10000.jpg_.webp",
          info: "天猫超市",
        },
        {
          src: "https://gw.alicdn.com/tfs/TB1Jc0fSFXXXXXTapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp",
          info: "天猫国际",
        },
        {
          src: "https://gw.alicdn.com/tfs/TB15lhOSFXXXXaKXpXXXXXXXXXX-147-147.png_110x10000.jpg_.webp",
          info: "聚划算",
        },
        {
          src: "https://gw.alicdn.com/tfs/TB12CFXSFXXXXcpapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp",
          info: "分类",
        },
      ],
    };
  },
};
</script>

<style scoped>
ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
li{
    width: 70px;
    height: 78px;
    text-align: center;
}
img{
    width: 48px;
    height: 48px;
    padding: 5px 11px 2px;
}
p{
    font-size: 14px;
   
}
</style>